<template>
    <Form :model="model">
      <!-- 通用字段 -->
      <Form.Item label="角色">
        <Input v-model:value="model.name" placeholder="请输入权限配置角色" />
      </Form.Item>
  
      <Form.Item label="表">
        <Input
          disabled
          placeholder="请输入表"
          :value="tableLabel"
        />
      </Form.Item>
  
      <Form.Item label="操作类别">
        <Select v-model:value="model.type" placeholder="请选择操作类别">
          <Select.Option value="insert">insert</Select.Option>
          <Select.Option value="select">select</Select.Option>
          <Select.Option value="update">update</Select.Option>
          <Select.Option value="delete">delete</Select.Option>
        </Select>
      </Form.Item>
  
      <!-- 动态表单：根据操作类型渲染 -->
      <template v-if="model.type === 'insert'">
        <InsertForm
          :model="model"
          :fields="fields"
          @addPreset="addPreset('insert')"
          @removePreset="removePreset('insert')"
        />
      </template>
  
      <template v-else-if="model.type === 'select'">
        <SelectForm :model="model" :fields="fields" />
      </template>
  
      <template v-else-if="model.type === 'update'">
        <UpdateForm
          :model="model"
          :fields="fields"
          @addPreset="addPreset('update')"
          @removePreset="removePreset('update')"
        />
      </template>
  
      <template v-else-if="model.type === 'delete'">
        <p>删除操作无需额外配置。</p>
      </template>
    </Form>
  </template>
  
  <script setup>
  import { computed, defineEmits, defineProps } from 'vue';
  import { Form, Input, Select } from 'ant-design-vue';
  import InsertForm from './InsertForm.vue';
  import SelectForm from './SelectForm.vue';
  import UpdateForm from './UpdateForm.vue';
  
  // Props
  const props = defineProps({
    model: {
      type: Object,
      required: true,
    },
    tableObject: {
      type: Object,
      required: true,
    },
    fields: {
      type: Array,
      required: true,
    },
  });
  
  // Emitters
  const emit = defineEmits(['update:model', 'addPreset', 'removePreset']);
  
  // Computed
  const tableLabel = computed(() => {
    return props.tableObject.name + (props.tableObject.comment ? ` - ${props.tableObject.comment}` : '');
  });
  
  // Methods
  const addPreset = (type) => {
    emit('addPreset', type);
  };
  
  const removePreset = (type, key) => {
    emit('removePreset', type, key);
  };
  </script>
  